<!DOCTYPE html>
<html>
<head>
    <title>API</title>
    <meta charset="utf-8">
    <link href="../content/shared/styles/examples-offline.css" rel="stylesheet">
    <link href="../../styles/kendo.common.min.css" rel="stylesheet">
    <link href="../../styles/kendo.rtl.min.css" rel="stylesheet">
    <link href="../../styles/kendo.default.min.css" rel="stylesheet">
    <link href="../../styles/kendo.dataviz.min.css" rel="stylesheet">
    <link href="../../styles/kendo.dataviz.default.min.css" rel="stylesheet">
    <script src="../../js/jquery.min.js"></script>
    <script src="../../js/kendo.all.min.js"></script>
    <script src="../content/shared/js/console.js"></script>
    <script>
        
    </script>
    
    
</head>
<body>
    
        <a class="offline-button" href="../index.html">Back</a>
    
    
        <div id="example">
            
            <div class="demo-section k-header">
                <input id="movies" style="width: 400px" />
            </div>          
            
            <div class="box">
                <div class="box-col">
                <h4>API Functions</h4>
                <ul class="options">
                    <li>
                        <button id="enable" class="k-button">Enable</button> <button id="disable" class="k-button">Disable</button>
                    </li>
                    <li>
                        <button id="readonly" class="k-button">Readonly</button>
                    </li>
                    <li>
                        <button id="open" class="k-button">Open</button> <button id="close" class="k-button">Close</button>
                    </li>
                    <li>
                        <button id="getValue" class="k-button">Get value</button> <button id="getText" class="k-button">Get text</button>
                    </li>
                </ul>
                </div>
                <div class="box-col">
                <h4>Filter</h4>
                <ul class="options">
                    <li>
                        <select id="filter">
                            <option value="none">None</option>
                            <option value="startswith">Starts with</option>
                            <option value="contains">Contains</option>
                            <option value="eq">Equal</option>
                        </select>
                    </li>
                    <li>
                        <input id="word" value="The" class="k-textbox" style="width: 149px; margin: 0;" />
                    </li>
                    <li>
                        <button id="find" class="k-button">Find item</button>
                    </li>
                </ul>
                </div>
                <div class="box-col">
                <h4>Select</h4>
                <ul class="options">
                    <li>
                        <input id="index" value="0" class="k-textbox" style="width: 40px; margin: 0;" /> <button id="select" class="k-button">Select by index</button>
                    </li>
                    <li>
                        <input id="value" value="1" class="k-textbox" style="width: 40px; margin: 0;" /> <button id="setValue" class="k-button">Select by value</button>
                    </li>
                </ul>
                </div>
            </div>

            <script>
                $(document).ready(function() {
                    var data = [
                        {text: "12 Angry Men", value:"1"},
                        {text: "Il buono, il brutto, il cattivo.", value:"2"},
                        {text: "Inception", value:"3"},
                        {text: "One Flew Over the Cuckoo's Nest", value:"4"},
                        {text: "Pulp Fiction", value:"5"},
                        {text: "Schindler's List", value:"6"},
                        {text: "The Dark Knight", value:"7"},
                        {text: "The Godfather", value:"8"},
                        {text: "The Godfather: Part II", value:"9"},
                        {text: "The Shawshank Redemption", value:"10"},
                        {text: "The Shawshank Redemption 2", value:"11"}
                    ];

                    $("#movies").kendoComboBox({
                                       dataTextField: "text",
                                       dataValueField: "value",
                                       dataSource: data,
                                       height: 100
                                  })
                                  .closest(".k-widget")
                                  .attr("id", "movies_wrapper");

                    $("#filter").kendoDropDownList({
                        change: filterTypeOnChanged
                    });

                    var combobox = $("#movies").data("kendoComboBox"),
                        setValue = function(e) {
                            if (e.type != "keypress" || kendo.keys.ENTER == e.keyCode)
                                combobox.value($("#value").val());
                        },
                        setIndex = function(e) {
                            if (e.type != "keypress" || kendo.keys.ENTER == e.keyCode) {
                                var index = parseInt($("#index").val());
                                combobox.select(index);
                            }
                        },
                        setSearch = function (e) {
                            if (e.type != "keypress" || kendo.keys.ENTER == e.keyCode)
                                combobox.search($("#word").val());
                        };

                    $("#enable").click(function() {
                        combobox.enable();
                    });

                    $("#disable").click(function() {
                        combobox.enable(false);
                    });

                    $("#readonly").click(function() {
                        combobox.readonly();
                    });

                    $("#open").click(function() {
                        combobox.open();
                    });

                    $("#close").click(function() {
                        combobox.close();
                    });

                    $("#getValue").click(function() {
                        alert(combobox.value());
                    });

                    $("#getText").click(function() {
                        alert(combobox.text());
                    });

                    $("#setValue").click(setValue);
                    $("#value").keypress(setValue);

                    $("#select").click(setIndex);
                    $("#index").keypress(setIndex);

                    $("#find").click(setSearch);
                    $("#word").keypress(setSearch);

                    function filterTypeOnChanged() {
                        combobox.options.filter = $("#filter").val();
                    }
                });
           </script>
            <style scoped>
                .box .k-textbox {
                    width: 40px;
                }
                .demo-section {
                    width: 400px;
                }
                .k-button {
                    min-width: 80px;
                }
            </style>
        </div>


    
    
</body>
</html>
